<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* div > p {
        color: green;
      } */
      /* 结构1：div的第一个儿子p元素（按照所有兄弟计算的）-- */
      /* div > p:first-child {
        color: red;
      } */

      /* div > p:last-child {
        color: red;
      } */

      /* div > p:nth-child(2n) {
        color: red;
      } */

      /* even偶数 */
      /* div > p:nth-child(even) {
        color: red;
      } */

      /* odd奇数 */
      /* div > p:nth-child(odd) {
        color: red;
      } */

      /* 结构4  first-of-type同类型兄弟计算*/
      /* div > p:first-of-type {
        color: red;
      } */

      /* 结构5  last-of-type同类型兄弟计算 */
      /* div > p:last-of-type {
        color: red;
      } */

      /* 结构6  nth-of-type同类型兄弟计算  */
      div > p:nth-of-type(4) {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 结构1 -->
    <!-- <div>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <p>赵六：99分</p>
    </div> -->

    <!-- 结构2 -->
    <!-- <div>
      <span>张三：99分</span>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <p>赵六：99分</p>
    </div> -->

    <!-- <div>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <p>赵六：99分</p>
    </div> -->

    <!-- 结构4 -->
    <!-- <div>
      <span>33</span>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <p>赵六：99分</p>
    </div> -->

    <!-- 结构5 -->
    <!-- <div>
      <span>33</span>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <span>eee</span>
      <p>赵六：99分</p>
    </div> -->

    <!-- 结构6 -->
    <div>
      <span>33</span>
      <p>张三：99分</p>
      <p>李四：99分</p>
      <p>王五：99分</p>
      <span>eee</span>
      <p>赵六：99分</p>
    </div>
  </body>
</html>
